<template>
  <div class="main-container">
    <clock-box></clock-box>
    <div class="login-form">
      <div :class="loginItemsContainerClass">
        <div class="operation-title">{{ operationTitle }}</div>
        <!-- 登录 -->
        <div class="login-container" v-if="operationTitle === '登录'">
          <el-form
            label-width="80px"
            label-position="right"
            style="margin: o auto"
            :rules="rules"
            :model="user"
            ref="userForm"
            @keyup.enter.native="submitForm('userForm')"
          >
            <el-form-item
              label="username:"
              class="form-login-item"
              prop="username"
            >
              <el-input
                v-model="user.username"
                placeholder="请输入用户名"
              ></el-input
              ><br />
            </el-form-item>
            <el-form-item
              label="password:"
              class="form-login-item"
              prop="password"
            >
              <el-input
                placeholder="请输入密码"
                v-model="user.password"
                show-password
              ></el-input
              ><br />
            </el-form-item>
            <div class="login-button">
              <el-button type="primary" @click="submitForm('userForm')"
                >Login</el-button
              >
              <el-button type="primary" @click="toRegister">Register</el-button>
              <el-button type="warning" @click="toReset"
                >forgetPassword</el-button
              >
            </div>
          </el-form>
        </div>
        <!-- 注册 -->
        <register
          v-else-if="operationTitle === '注册'"
          @toLogin="toLogin"
        ></register>
        <!-- 忘记密码 -->
        <reset
          v-else-if="operationTitle === '忘记密码'"
          @toLogin="toLogin"
        ></reset>
      </div>

      <div class="text-container">
        <el-collapse v-model="activeNames" accordion>
          <el-collapse-item title="目前已知的bug" name="1">
            <ol>
              <li>在注册的时候没有判断用户名重复,且没有进行判空操作</li>
              <li>发票目前只能上传pdf</li>
              <li>没有做多终端适配</li>
            </ol>
          </el-collapse-item>
          <el-collapse-item title="已经修复的bug" name="2">
            <ol>
              <li>查找的发票按照金额由低到高排序</li>
              <li>添加了发票删除</li>
              <li>添加了发票合并</li>
              <li>增加导出excel</li>
              <li>优化前端导航栏相关代码</li>
              <li>删除发票后定时刷新</li>
              <li>
                后端没有对token过期或者非法进行处理,会导致前端页面突然卡住,无数据
              </li>
              <li>增加了编辑按钮，进一步优化了对发票识别不正确的情况</li>
            </ol>
          </el-collapse-item>
          <el-collapse-item title="后续工作" name="3">
            <ol>
              <li>前端添加密码加密</li>
              <li>修复前面遗留的bug</li>
            </ol>
          </el-collapse-item>
          <el-collapse-item title="联系方式" name="4">
            <ol>
              <li>QQ:863386791</li>
              <li>email:863386791@qq.com</li>
            </ol>
          </el-collapse-item>
          <el-collapse-item
            title="git地址,项目已开源,共同分享，共同进步"
            name="5"
          >
            <ol>
              <li>前端: https://gitee.com/yang1yu/invoice-front.git</li>
              <li>后端: https://gitee.com/yang1yu/invoices.git</li>
            </ol>
          </el-collapse-item></el-collapse
        >
        <!-- 目前已知的bug
        <ol>
          <li>在注册的时候没有判断用户名重复,且没有进行判空操作</li>
          <li>发票目前只能上传pdf</li>
          <li>没有做多终端适配</li>
        </ol>
        已经修复的bug
        <ol>
          <li>查找的发票按照金额由低到高排序</li>
          <li>添加了发票删除</li>
          <li>添加了发票合并</li>
          <li>增加导出excel</li>
          <li>优化前端导航栏相关代码</li>
          <li>删除发票后定时刷新</li>
          <li>
            后端没有对token过期或者非法进行处理,会导致前端页面突然卡住,无数据
          </li>
          <li>增加了编辑按钮，进一步优化了对发票识别不正确的情况</li>
        </ol>
        后续工作
        <ol>
          <li>前端添加密码加密</li>
          <li>修复前面遗留的bug</li>
        </ol>
        联系方式
        <ol>
          <li>QQ:863386791</li>
          <li>email:863386791@qq.com</li>
        </ol>
        git地址,项目已开源,共同分享，共同进步
        <ul>
          <li>前端: https://gitee.com/yang1yu/invoice-front.git</li>
          <li>后端: https://gitee.com/yang1yu/invoices.git</li>
        </ul> -->
      </div>

      <div class="cube" ref="cube" :style="{ left: '100px', top: '100px' }">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { loginCommon, toResetCommon } from "@/service.js";
import register from "./register.vue";
import Reset from "./reset.vue";
import ClockBox from "./clockBox.vue";
export default {
  components: { register, Reset, ClockBox },
  name: "Login",
  data() {
    return {
      operationTitle: "登录",
      activeNames: [],
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" }
        ]
      },
      user: {
        username: "",
        password: ""
      }
    };
  },
  computed: {
    loginItemsContainerClass() {
      let height;
      switch (this.operationTitle) {
        case "登录":
          height = "height-252";
          break;
        case "注册":
          height = "height-376";
          break;
        case "忘记密码":
          height = "height-252";
          break;
        default:
          height = "height-260";
          break;
      }
      return ["login-items-container", height];
    }
  },
  mounted() {
    this.handleCubeMove();
  },
  methods: {
    toLogin() {
      this.operationTitle = "登录";
    },
    toReset() {
      this.operationTitle = "忘记密码";
      // this.$router.push({ path: "/reset" });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.login();
        } else {
          this.$message.warning("请输入正确的用户名或密码");
          return false;
        }
      });
    },
    async login() {
      const res = await loginCommon(this.user);
      if (res.data.code == 0) {
        if (res.data.code == 0) {
          sessionStorage.setItem("token", res.data.data.token);
          this.$message.success("登录成功");
          this.$router.replace({ path: "/main" });
          // name : 'Main'
        } else {
          this.$message.error("登录失败");
        }
      }
      // this.$axios({
      //   method: "post",
      //   url: "/user/login",
      //   params: this.user
      // }).then(res => {
      //   if (res.data.code == 0) {
      //     sessionStorage.setItem("token", res.data.data.token);
      //     this.$message("登录成功")
      //     this.$router.replace({ path: "/main" });
      //     // name : 'Main'
      //   }else{
      //     this.$message("登录失败");
      //   }
      // });
    },
    toRegister() {
      this.operationTitle = "注册";
      // this.$router.push({ path: "/register" });
    },
    handleCubeMove() {
      console.log("moving");
      const cube = document.getElementsByClassName("cube")[0];
      cube.style.left = "0px";
      let X;
      let Y;
      const speed = 200 / 60;
      let xSpeed = speed;
      let ySpeed = speed;
      const xBorder = window.innerWidth - 200;
      const yBorder = window.innerHeight - 200;
      console.log();
      setInterval(() => {
        X = cube.style.left.slice(0, -2) - 0;
        Y = cube.style.top.slice(0, -2) - 0;
        if (X >= 0 && X <= xBorder && Y >= 0 && Y <= yBorder) {
          // console.log("1111111");
        } else if (X >= 0 && X <= xBorder && (Y < 0 || Y >= yBorder)) {
          // console.log("2222222");
          ySpeed = -ySpeed;
        } else if ((X < 0 || X >= xBorder) && Y >= 0 && Y < yBorder) {
          // console.log("3333333");
          xSpeed = -xSpeed;
        } else {
          // console.log("4444444");
          xSpeed = -xSpeed;
          ySpeed = -ySpeed;
        }
        X += xSpeed;
        Y += ySpeed;
        cube.style.left = `${X}px`;
        cube.style.top = `${Y}px`;
      }, 1000 / 60);
    },
    // 输入类似'100px'的字符串和要增加的像素数，输出增加后的像素数
    checkXY(X, Y) {
      return (
        X >= 0 &&
        X <= window.screen.width &&
        Y >= 0 &&
        Y <= window.screen.height
      );
    }
  }
};
</script>
<style>
body {
  margin: 0;
  padding: 0;
}
</style>
<style lang="scss" scoped>
@keyframes firstDisplay {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.main-container {
  padding-top: 200px;
  box-sizing: border-box;
  height: 100vh;
  position: relative;
  .login-form {
    .login-items-container {
      transition: height 0.5s ease-in-out;
      margin: auto;
      width: 25%;
      padding: 20px 15px 20px 15px;
      border-radius: 20px;
      position: relative;
      border: 1px solid rgba(0, 0, 0, 0.3);
      // background-color: rgba(255, 192, 203, 0.7);
      // background-color: pink;

      backdrop-filter: blur(10px);

      // ::after {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   height: 100%;
      //   width: 100%;
      //   z-index: -1;
      //   filter: blur(10px);
      // }
      .operation-title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
      }
      .login-container {
        animation: firstDisplay 1.5s ease-in-out;
        .login-button {
          margin-top: 30px;
          text-align: right;
        }
        .form-login-item {
          width: 100%;
        }
      }
    }
    .text-container {
      color: black;
      position: absolute;
      bottom: 0px;
      right: 20px;
      width: 300px;
    }
    $bgi: "../assets/anime-background.jpg";
    .cube {
      width: 150px;
      height: 150px;
      z-index: -1;
      /* background-color: #bfa; */
      position: absolute;
      transform-style: preserve-3d;
      animation: run 10s infinite linear;
    }
    .cube div {
      width: 150px;
      height: 150px;
      background-size: 100% 100%;
      position: absolute;
      opacity: 0.7;
    }
    .img {
      vertical-align: top;
    }
    .box1 {
      background-image: url($bgi);
      transform: rotateY(90deg) translateZ(100px);
    }
    .box2 {
      background-image: url($bgi);
      transform: rotateY(-90deg) translateZ(100px);
    }

    .box3 {
      background-image: url($bgi);
      transform: rotateX(90deg) translateZ(100px);
    }
    .box4 {
      background-image: url($bgi);
      transform: rotateX(-90deg) translateZ(100px);
    }
    .box5 {
      background-image: url($bgi);
      transform: rotateY(180deg) translateZ(100px);
    }
    .box6 {
      background-image: url($bgi);
      transform: translateZ(100px);
    }
    @keyframes run {
      from {
        transform: rotateX(0) rotateY(0) rotateZ(0);
      }
      to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
      }
    }
  }
  .height-260 {
    height: 260px;
  }
  .height-252 {
    height: 252px;
  }
  .height-376 {
    height: 376px;
  }
}
</style>
